<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        房产信息列表
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="css/main.css" media="all">
    <script type="text/javascript" src="lib/loading/okLoading.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <!--导入ElementUI样式列表，css样式一般都在页面头部-->
    <link rel="stylesheet" href="/css/index.css">
</head>
<body>
<div class="x-body" id="app">
    <div>
        <span class="demonstration">按房产名称搜索</span>
        <el-input v-model="searchMap.name" style="width: 30%" placeholder="请输入小区名称"></el-input>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="demonstration">选择房产类型</span>
        <el-select v-model="searchMap.type" style="width: 8%" clearable placeholder="类型">
            <el-option
                    v-for="item in types"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="demonstration">选择房产状态</span>
        <el-select v-model="searchMap.status" style="width: 8%" clearable placeholder="状态">
            <el-option
                    v-for="item in statuses"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label">
            </el-option>
        </el-select>
        &nbsp;&nbsp;
        <el-button type="primary" plain @click="pageNum=1;search()">搜索</el-button>
    </div>
    <br>

    <xblock>
        <button class="layui-btn layui-btn-danger" @click="delAll()"><i class="layui-icon">&#xe640;</i>批量删除</button>
    </xblock>
    <table class="layui-table">
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="allChecked" :checked="checkedIDs.length===houseList.length"
                       @click="allChecked">
            </th>

            <th>
                房产ID
            </th>

            <th>
                房产名称
            </th>

            <th>
                房产类型
            </th>

            <th>
                房产状态
            </th>

            <th>
                地址
            </th>

            <th>
                面积
            </th>

            <th>
                标签
            </th>

            <th>
                价格
            </th>

            <th>
                操作
            </th>
        </tr>
        </thead>
        <tbody id="x-img">
        <tr v-for="(house,index) in houseList">
            <td>
                <input type="checkbox" :id="'id'+house.id" :value="house.id" v-model="checkedIDs">
            </td>
            <td>{{house.id}}</td>
            <td>{{house.name}}</td>
            <td>{{house.type}}</td>
            <td>{{house.status}}</td>
            <td>{{house.address}}</td>
            <td>{{house.area}}</td>
            <td>{{house.tags}}</td>
            <td>{{house.price}}</td>
            <td class="td-manage">
                <a title="删除" href="javascript:;" @click="del_one(house.id)"
                   style="text-decoration:none">
                    <i class="layui-icon">&#xe640;</i>
                </a>
            </td>
        </tr>
        </tbody>
    </table>

    <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="pageSize"
            layout="prev, pager, next,sizes"
            :page-sizes="[2,4]"
            style="text-align: right;"
            :total="total">
    </el-pagination>

</div>

<script src="/lib/layui/layui.js" charset="utf-8"></script>
<!--js脚本一般是放在页面尾部-->
<!--Vue js脚本-->
<script src="/js/vue.js" charset="utf-8"></script>
<!--引入ElementUI组件库-->
<script src="/js/index.js" charset="utf-8"></script>
<!--引入Axios js脚本-->
<script src="/js/axios.js" charset="utf-8"></script>
<!--引入时间插件包Momentjs-->
<script src="/js/moment.min.js" charset="utf-8"></script>
<script>
    var app = new Vue({
        el: "#app",//声明当前Vue在页面的作用域
        data: {
            types: [{value: '商业类', label: '商业类'},
                {value: '住宅', label: '住宅'},
                {value: '底商', label: '底商'},
                {value: '写字楼', label: '写字楼'},
                {value: '别墅', label: '别墅'}],
            statuses: [{value: '在售', label: '在售'},
                {value: '售罄', label: '售罄'},
                {value: '未开盘', label: '未开盘'}],
            checkedIDs: [],
            houseList: [],
            total: 10,
            pageNum: 1,
            pageSize: 2,
            searchMap: {"name": "", "type": "", "status": ""},
        },
        methods: {
            //分页条件查询小区列表
            search() {

                axios.post(`house/findHousePage/${this.pageNum}/${this.pageSize}`, this.searchMap).then((res) => {
                    debugger
                    var b = this.searchMap;
                    app.houseList = res.data.data.records;
                    debugger
                    var a = res.data.data.records;
                    for (i in a){
                        console.log(i);
                    }
                    app.total = res.data.data.total;
                });
            },
            //单个删除
            del_one(id) {
                this.$confirm('请问您是否要删除该小区信息?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //把选中的ID封装到集合中
                    this.checkedIDs.push(id);
                    //执行删除操作
                    axios.post("/house/del", this.checkedIDs).then((res) => {
                        if (res.data.flag) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                        //删除成功，把选中的ID列表置为空
                        this.checkedIDs = [];
                        //把页面置为1，重新获取列表数据
                        this.pageNum = 1;
                        this.search();
                    });

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //多选删除
            delAll() {
                this.$confirm('请问您是否要删除选中小区信息?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //执行删除操作
                    axios.post("/house/del", this.checkedIDs).then((res) => {
                        if (res.data.flag) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                        //删除成功，把选中的ID列表置为空
                        this.checkedIDs = [];
                        //把页面置为1，重新获取列表数据
                        this.pageNum = 1;
                        this.search();
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //全选、全不选方法
            allChecked: function () {
                if (this.checkedIDs.length === this.houseList.length) {
                    // 全不选
                    this.checkedIDs = [];

                } else {
                    this.checkedIDs = [];
                    // 全选
                    this.houseList.forEach((item) => {
                        this.checkedIDs.push(item.id); // 与checkbox的value统一
                    })
                }
            },

            //handleSizeChange每页数量发生变化后触发的方法
            handleSizeChange(pageSize) {
                this.pageSize = pageSize;
                this.search();
            },
            //handleCurrentChange页码变化触发方法
            handleCurrentChange(pageNum) {
                this.pageNum = pageNum;
                this.search();
            },

            /*弹出层*/
            /*
                参数解释：
                title	标题
                url		请求的url
                id		需要操作的数据id
                w		弹出层宽度（缺省调默认值）
                h		弹出层高度（缺省调默认值）
            */
            x_admin_show(title, url, width, height) {
                if (title == null || title == '') {
                    title = false;
                }
                ;
                if (url == null || url == '') {
                    url = "404.html";
                }
                ;
                if (width == null || width == '') {
                    width = 800;
                }
                ;
                if (height == null || height == '') {
                    height = ($(window).height() - 50);
                }
                ;

                layer.open({
                    type: 2,
                    area: [width + 'px', height + 'px'],
                    fix: false, //不固定
                    maxmin: true,
                    shadeClose: true,
                    shade: 0.4,
                    title: title,
                    content: url,
                    cancel: function (index, layero) {
                        //使用右上角x关闭弹窗层，回调方法，重新加载页面数据，让修改或者新增的数据立马显示在页面上
                        app.search();
                    }
                });
            },
            /*关闭弹出框口*/
            x_admin_close() {
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            }
        },

        created: function () {//Vue生命周期方法，加载页面时会执行该方法
            layui.use(['laydate', 'element', 'laypage', 'layer'], function () {
                $ = layui.jquery;//jquery
                layer = layui.layer;//弹出层
                okLoading.close($);
                layer.ready(function () { //为了layer.ext.js加载完毕再执行
                    layer.photos({
                        photos: '#x-img'
                    });
                });
            });
            //初始页面获取小区列表信息
            this.search();
        }
    });
</script>


</body>
</html>